<template>
  <div>

    <div class="row justify-center" style="position: absolute;top:3vh;right: 45vw;z-index: 1000;background: #ccd1d7;">
      <div>
        <q-input bottom-slots v-model="distinction" label="搜索位置或坐标...." style="width: 20vw;">
          <template v-slot:before>
            <q-icon name="near_me" color="light-blue"/>
          </template>
          <template v-slot:append>
            <q-btn round dense flat icon="search" color="light-blue" @click="submit" />
          </template>
        </q-input>
        <div class="text-center">{{Geo.position.toString()}}</div>
      </div>
    </div>
<!--    <div><button @click="changeVal">测试按钮</button></div>-->
    <MapComponent :value="keyword" @sendPosi="receive"></MapComponent>
  </div>
</template>

<script>
import MapComponent from "layouts/MapComponent";

export default {
  name: 'MainLayout',
  components: {MapComponent},
  data() {
    return {
      Geo:{
        position: [],
        degree: []
      },
      distinction: "",
      keyword: ''
    }
  },
  methods: {
    submit() {
      this.keyword = this.distinction
    },
    receive(posi) {

      this.Geo.position = posi.position
      this.Geo.degree = posi.degree
      console.log(this.Geo.position)
    },
    changeVal() {

      // this.keyword = [111,112]

    //   this.keyword = [
    //   "120°10'40.195\"",
    //     "30°14'46.320\""
    // ]
    //   this.keyword = '杭州东站'
      // this.keyword = [120.177832, 30.2462]
    }
  }

}
</script>
